<template>
	<view class="recexpert flex-r" @tap="goExpertHome">
		<view class="expert-body-detail flex-c ac" v-for="(expert, index) in expertList.slice(0, maxShow)" :key="index" :data-expert="expert.expertId">
			<view class="detail-head border-round">
				<lazy-image v-if="expert.avatar" class="inheritwh border-round" :src="expert.avatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
				<lazy-image v-if="expert.expertAvatar" class="inheritwh border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
				<view class="expert-note" v-if="expert.saleArticleNum" :class="{'round': expert.saleArticleNum < 10}">
					<text>{{expert.saleArticleNum}}</text>
				</view>
			</view>
			<view class="detail-name flex-r ac jc">
				<text class="text-info">{{expert.realname || expert.expertName}}</text>
				<image v-if="expert.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
			</view>
			<text class="text-mini color-grey bg-color-red" v-if="type=='red'">{{expert.hotContineTxt ? expert.hotContineTxt : expert.hitResultTxt}}</text>
			<text class="text-mini color-grey" v-else-if="type=='hits'">涨粉{{expert.fansNum > 10000 ? String(parseInt(expert.fansNum / 10000))+'W+' : expert.fansNum}}人</text>
			<text class="text-mini color-grey bg-color-red" v-else>{{expert.tag || expert.expertTag}}</text>
		</view>
		<!-- maxShow 小于 10 显示查看更多 -->
		<view class="expert-body-detail flex-c ac" v-if="maxShow < 10" @tap.stop="goRecExperts">
			<view class="detail-head">
				<image class="inheritwh" src="@/public/images/index/ckgd.png" mode="aspectFill"></image>
			</view>
			<view class="detail-name flex-r ac jc">
				<text class="text-info">查看更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * RecExpert 推荐专家
	 * @description 展示首页推荐专家、连红推荐、周人气榜
	 * @property {String} type = [rec|red|hits] 专家类型
	 * @property {Array} expertList 专家列表数据
	 * @property {Number} maxShow 最大展示数量，小于10显示查看更多
	 * @property {Object} link 查看更多跳转页面信息
	 * @example <RecExpert type="rec" :expertList="expertList"></RecExpert>
	 */
	export default {
		name:"RecExpert",
		props: {
			type: {
				type: String,
				default: 'rec'
			},
			expertList: {
				type: Array,
				default: () => {
					return []
				}
			},
			maxShow: {
				type: Number,
				default: 10
			},
			link: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			//进入推荐专家列表
			goRecExperts(){
				if(this.link.name){
					this.link.params = {...this.link.params, title: this.link.title}
					this.$goByName(this.link.name, this.link.params);
				}
			},
			//进入专家主页
			goExpertHome(event) {
				if(event.target.dataset.expert){
					this.$CHS.goExpertHome(event.target.dataset.expert);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recexpert{
		flex-wrap: wrap;
	}
	.expert-body-detail{
		margin: 30rpx 0;
		width: 20%;
		.detail-head{
			pointer-events: none;
			position: relative;
			width: 80rpx;
			height: 80rpx;
			background-color: #FFFFFF;
			background-size: 100%;
		}
		.detail-name{
			pointer-events: none;
			margin-top: 18rpx;
			height: 24rpx;
			.text-info{
				max-width: 110rpx;
				letter-spacing: 0rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			image{
				margin-left: 3rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
		.text-mini{
			pointer-events: none;
			margin-top: 5rpx;
			max-width: 125rpx;
			height: 32rpx;
			padding: 0 14rpx;
			line-height: 32rpx;
			letter-spacing: 0rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			border-radius: 4rpx;
		}
		.bg-color-red{
			color: #F23030;
			background: #FFF2F2;
			font-weight: 500;
		}
	}
	.expert-body-detail:nth-child(n+6){
		margin-top: 0;
	}
</style>